<template>
	<view>

		<!-- 轮播图 -->
		<view class="top1">
			<swiper circular :interval="3000" style="height: 8000px" :current="current" :duration="400"
				@change="change">
				<swiper-item v-for="(item ,index) in data" :key="index">
					<image :src="item.image" id="imageToAnalyze" style="width: 100%;height: 750rpx;z-index: 1;"
						@click="swiperClick(item)">
					</image>
					<view :style="{backgroundColor:data[index].color2,height:'800px',width:'100%',marginTop:'-10rpx'}">
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="top1">
			<swiper circular autoplay="" :interval="3000" style="height: 750rpx" :duration="800" @change="change">
				<swiper-item v-for="(item ,index) in data" :key="index">
					<image :src="item.image2" id="imageToAnalyze" style="width: 100%;height: 100%;z-index: 1;"
						@click="swiperClick(item)">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<view style="position: relative;z-index: 2;">
			<!-- 位置信息与店铺 -->
			<view class="margin   padding-sm maoboli" style="margin-top: 550rpx; color: #000;border-radius: 20rpx;">
				<view style="display: flex;justify-content: space-between;">
					<view style="color: #999;" @click="getLocation()">
						<uni-icons style="color: #999;" type="location" class="margin-right-xs"></uni-icons>
						{{location.address}}
					</view>
					<view class="font-13" style="color: #999;" @click="selectStore">切换门店</view>
				</view>
				<storeItem></storeItem>
			</view>


			<!-- 验卷、预约、开门 -->
			<view class="margin maoboli radius padding-sm">
				<view class="  text-center" style="display: flex;">
					<view class="bannerMain" @click="handleJiaoLiuQun" style="border-right: 1px solid #e7e7e7;">
						<image style="width: 150rpx;height: 150rpx;z-index: 2;" src="@/static/images/时尚购物(1).png">
						</image>
						<view style="margin-top: -20rpx;z-index: 3;">
							<view class="title">验卷</view>
							<view class="content">抖音、美团验卷</view>
						</view>
					</view>
					<view class="bannerMain" @click="handleBuilding">
						<image style="width: 150rpx;height: 150rpx;z-index: 2;" src="@/static/images/存钱购物.png">
						</image>
						<view style="margin-top: -20rpx;z-index: 3;">
							<view class="title">预约</view>
							<view class="content">选择房间座位</view>
						</view>

					</view>

				</view>
			</view>


			<!-- 其它小功能 -->
			<view class="margin maoboli radius padding-sm">
				<view class="  text-center" style="display: flex;">
					<view class="bannerMain" @click="handleJiaoLiuQun">

						<image style="width: 100rpx;height: 100rpx;z-index: 2;" src="@/static/images/WIFI2.png">
						</image>
						<view style="margin-top: ;z-index: 3;">
							<view class="title">WiFi</view>
							<view class="content">连接WiFi</view>
						</view>
					</view>
					<view class="bannerMain" @click="handleBuilding">
						<view style="padding: 18rpx;">
							<image style="width: 60rpx;height: 60rpx;z-index: 2;" src="@/static/images/拨号(2).png">
							</image>
						</view>

						<view style="margin-top: 0rpx;z-index: 3;">
							<view class="title">呼叫</view>
							<view class="content">联系店主</view>
						</view>

					</view>

					<view class="bannerMain" @click="recharge">
						<image style="width: 100rpx;height: 100rpx;z-index: 2;" src="@/static/images/金融_钱包现金.png">
						</image>
						<view style="margin-top: 0rpx;z-index: 3;">
							<view class="title">充值</view>
							<view class="content">会员储蓄</view>
						</view>

					</view>
					<view class="bannerMain" @click="handleBuilding">

						<image style="width: 100rpx;height: 100rpx;z-index: 2;" src="@/static/images/金融_认证成功(1).png">
						</image>
						<view style="margin-top: 0rpx;z-index: 3;">
							<view class="title">开门</view>
							<view class="content">开大小门</view>
						</view>
					</view>
				</view>
			</view>




			<!-- 门店公告 -->
			<view class="margin  radius maoboli">
				<uni-section title="门店介绍" type="circle" style="color: #999;">
					<template v-slot:right>
						<view @click="close" style="font-size: 24rpx;color:#999;">查看更多</view>
					</template>
					<view class="padding-xs" @click="swiperClick({id:4})">
						阿斯顿发山东阿斯顿法师打发斯蒂芬阿斯顿发阿斯顿发速
					</view>
				</uni-section>
			</view>
			<view :style="{backgroundColor:data[0].color}"></view>

			<guaguaLxianxi></guaguaLxianxi>
		</view>

		<!-- <customPopup ref="customPopup">
			<view style="width: 550rpx;">
				<view class="juzhong font-34rpx">申请位置权限</view>
				<view class="margin-top-lg">我们申请获取您的当前位置,便于推荐最近商家</view>
				<view style="display: flex;  " class="margin-top-lg">
					<view style="flex: 1;" class="juzhong bg-grey2 padding-sm radius" @click="showcustomPopup(false)">取消
					</view>
					<view style="flex: 1;" class="juzhong bg-pink padding-sm radius margin-left-sm">确认</view>
				</view>
			</view>
		</customPopup> -->

		<selectStorePopup ref="selectStorePopup">

		</selectStorePopup>

		<!-- <Tabbar :pageIndex="0"></Tabbar> -->
	</view>
</template>

<script>
	import {
		getLocation
	} from '@/utils/map'
	export default {
		data() {
			return {

				swiperDotIndex: 0,
				data: [{
					image2: '/static/images/像风一样自由.png',
					image: '/static/images/main.png',
					color2: 'rgb(253, 129, 103)',
					id: 1
				}, {
					image: '/static/images/云中家人.png',
					image2: '/static/images/云中家人2.png',
					color2: '#252b41',
					id: 1
				}, {
					image: '/static/images/main2.png',
					image2: '/static/images/每天开心2.png',
					color2: '#ff5c43 ',
					id: 1
				}],
				current: 0,
				mode: 'node',
				list: [],
				location: {
					address: "加载中..."
				}
			}
		},
		onShow() {
			this.showcustomPopup(true)
		},
		onLaunch() {

		},
		onLoad() {
			this.init()
		},
		methods: {
			/**
			 * 充值功能
			 */
			recharge() {
				uni.navigateTo({
					url: "/pages/mine/recharge/recharge"
				})
			},
			clickBannerItem(item) {},
			change(e) {
				this.current = e.detail.current
			},

			init() {
				// this.setColor()
				this.getLocation()
			},
			selectStore() {
				this.$refs.selectStorePopup.open()
			},
			async getLocation() {
				this.location.address = "加载中..."
				let asdf = await getLocation()
				this.location = asdf
				// this.showcustomPopup(true)
				this.$storage.setItem("location", this.location)
			},
			showcustomPopup(type) {

				if (type) {
					this.$refs.customPopup.open()
				} else {
					this.$refs.customPopup.close()
				}

			},
			/**
			 * 点击顶部滚动栏
			 * @param {Object} data
			 */
			swiperClick(data) {

				if (data.id == null) {
					return
				}
				//跳转文章页面
				uni.navigateTo({
					url: "/pages/common/textview/index?id=" + data.id
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #FF6145; // background-size: 100% 400px;
		height: 100%;


	}

	.bannerMain {
		flex: 1;
		color: #000;
		padding: 10rpx;
		margin: 0px 10rpx;
		// border-bottom: solid 1px #fff;
		// border-radius: 5px;
		// background-color: #fff;

		.title {
			font-size: 32rpx;
			color: #636161;
			font-weight: bold;
		}

		.content {
			font-size: 22rpx;
			color: #999
		}
	}

	.fade-in {
		animation: fadeIn 2s;
		/* 持续2秒的动画 */
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.mendianTap {
		margin-top: 5rpx;
		padding: 1px 4px;
		border: solid #999 1px;
		margin-right: 10rpx;
		margin-top: 5rpx;
		border-radius: 5px;
	}

	.top1 {
		position: fixed;
		z-index: 1;
		/* 固定定位 */
		top: 0;
		/* 定位到窗口顶部 */
		left: 0;
		/* 可选，将div固定在窗口的左边 */
		right: 0;
		/* 可选，将div固定在窗口的右边 */

		/* 确保div在页面内容之上 */
	}
</style>